<template>
    <div class="goods" id="goods" name="goods" v-if="showFlag">
        <!-- 面包屑 -->
        <div class="breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
                <el-breadcrumb-item>全部商品</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!-- 面包屑END -->

        <!-- 分类标签 -->
        <div class="nav">
            <div class="product-nav">
                <div class="title">分类</div>
                <el-tabs v-model="activeName" type="card">
                    <el-tab-pane
                            v-for="item in classification"
                            :key="item.id"
                            :label="item.name"
                    />
                </el-tabs>
            </div>
        </div>
        <!-- 分类标签END -->

        <!-- 主要内容区 -->
        <div class="main">
            <div class="list">
                <GoodsList :list="goodsList.slice((currentPage-1)*pagesize,currentPage*pagesize)" v-if="goodsList.length>0"></GoodsList>
                <div v-else class="none-product">抱歉没有找到相关的商品，请看看其他的商品</div>
            </div>
            <!-- 分页 -->
            <div class="pagination">
                <el-pagination
                        background
                        @size-change="handleSizeChange"
                        layout="total, sizes, prev, pager, next, jumper"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5,10,20,40]"
                        :page-size="pagesize"
                        :total="goodsList.length"
                ></el-pagination>
            </div>
            <!-- 分页END -->
        </div>
        <!-- 主要内容区END -->
    </div>
</template>

<script>
    export default {
        name: "Commodity",
        data() {
            return {
                activeName: "-1",// 分类列表当前选中的id
                currentPage:1,//
                pagesize : 20,
                goodsList: [],//商品
                classification: [],//分类标签
                showFlag:false,//加载页面
            }
        },
        methods: {
            // 初始页currentPage、初始每页数据数pagesize和数据data
            handleSizeChange: function (size) {
                this.pagesize = size;//每页下拉显示数据
            },
            handleCurrentChange: function(currentPage){
                this.currentPage = currentPage;//点击第几页
            },
            allGoods() {
                this.$axios
                    .get("/goods/allGoods", {
                        params: {
                            "page": 1,
                            "priceGt": -1,
                            "priceLte": -1,
                            "size": 500,
                            "sort": 1,
                        }
                    })
                    .then(res => {
                        for (let i = 2; i < res.data.result.list.length; i++) {
                            const item = res.data.result.list[i];
                            this.goodsList.push(item);
                        }
                        // this.goodsList = res.data.result.list;
                    })
                    .catch(err => {
                        return Promise.reject(err);
                    });
            },
            getClassification() {
                this.$axios
                    .get("/goods/cat/list", {
                        params: {
                            "id": 2,
                        }
                    })
                    .then(res => {
                        this.classification = res.data.result;
                    })
                    .catch(err => {
                        return Promise.reject(err);
                    });
            }
        },
        created() {
            this.allGoods();
            this.getClassification();
            this.showFlag = true;
        },
    }
</script>

<style scoped>
    .upStyle {
        height: 100%;
        width: 100%;
        background-color: #f2f5f6;
        box-shadow: 0 0 6px rgba(0, 0, 0, .12);
        text-align: center;
        line-height: 40px;
        color: #1989fa;
    }

    .goods {
        background-color: #f5f5f5;
        max-width : 100%;
    }

    /* 面包屑CSS */
    .el-tabs--card .el-tabs__header {
        border-bottom: none;
    }

    .goods .breadcrumb {
        height: 50px;
        background-color: white;
    }

    .goods .breadcrumb .el-breadcrumb {
        width: 1225px;
        line-height: 30px;
        font-size: 16px;
        margin: 0 auto;
    }

    /* 面包屑CSS END */

    /* 分类标签CSS */
    .goods .nav {
        background-color: white;
    }

    .goods .nav .product-nav {
        width: 1225px;
        height: 40px;
        line-height: 40px;
        margin: 0 auto;
    }

    .nav .product-nav .title {
        width: 50px;
        font-size: 16px;
        font-weight: 700;
        float: left;
    }

    /* 分类标签CSS END */

    /* 主要内容区CSS */
    .goods .main {
        margin: 0 auto;
        max-width: 1225px;
    }

    .goods .main .list {
        min-height: 650px;
        padding-top: 14.5px;
        margin-left: -13.7px;
        overflow: auto;
    }

    .goods .main .pagination {
        height: 50px;
        text-align: center;
    }

    .goods .main .none-product {
        color: #333;
        margin-left: 13.7px;
    }

    /* 主要内容区CSS END */
</style>
